
import './App.css';
import { BrowserRouter, Link, Route, Routes, useLocation } from 'react-router-dom';
import Home from './Home';
import About from './about';
import ReduxDemo from './reduxDemo';

function App() {
  return (
    <BrowserRouter>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/redux" element={<ReduxDemo />} />
      </Routes>
    </BrowserRouter>
  );
}

function NavBar() {
  const location = useLocation();
  return (
    <nav className="nav-bar">
      <Link
        to="/"
        className={`nav-link${location.pathname === '/' ? ' nav-link-active' : ''}`}
      >
        Home
      </Link>
      <Link
        to="/about"
        className={`nav-link${location.pathname === '/about' ? ' nav-link-active' : ''}`}
      >
        About
      </Link>
      <Link
        to="/redux"
        className={`nav-link${location.pathname === '/redux' ? ' nav-link-active' : ''}`}
      >
        ReduxDemo
      </Link>
    </nav>
  );
}

export default App
